<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%@ include file="/wesite/view/common/base.jsp" %>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>商品分类</title>
    <%@ include file="/wesite/view/common/common.jsp" %>
    <link rel="stylesheet" type="text/css" href="${webctx}/css/aui-slide.css"/>
    <script type="text/javascript" src="${webctx}/script/aui-tab.js"></script>
    <script type="text/javascript" src="${webctx}/script/aui-slide.js"></script>
    <style type="text/css">
        html, body {
            background: #fff;
        }

        body, h1, h2, h3, h4, h5, h6, p, dl, dd, ul, ol, form, input, textarea, th, td, select {
            margin: 0;
            padding: 0;
        }

        em {
            font-style: normal;
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        img {
            border: none;
            vertical-align: top;
        }

        input, textarea {
            outline: none;
        }

        textarea {
            resize: none;
            overflow: auto;
        }

        body {
            font-family: "Microsoft Yahei", "微软雅黑";
        }
        .searchbox .searchlist{
            position: fixed;
            top: 2.613333rem;
            left:0;
            bottom:2.6rem;
            width: 100%;
            background-color: #FFF;
        }
        .searchlist .searchlist-nav {
            position: fixed;
            top: 2.613333rem;
            left: 0;
            bottom: 2.6rem;
            background: #f5f5f5;
            width: 5.066667rem;
            overflow-y: scroll;
            /*-webkit-overflow-scrolling: touch;*/
        }

        .searchlist .searchlist-nav ul li a {
            display: block;
            text-align: center;
            font-size: 0.693333rem;
            line-height: 2.4rem;
            border-left: #f5f5f5 0.106667rem solid;
            color: #444;
            overflow: hidden;
            white-space: nowrap;
            -ms-text-overflow: ellipsis;
            text-overflow: ellipsis;
        }

        .searchlist .searchlist-nav ul li a.cur {
            background: #fff;
            border-right: none;
            border-left: #0daeff 0.106667rem solid;
            color: #0daeff;
        }

        .searchlist .searchlist-con {
            position: fixed;
            top: 2.613333rem;
            left: 5.066667rem;
            bottom: 2.6rem;
            width: 13.4rem;
            margin: 0;
            padding-top: .65rem;
            margin-left: .6rem;
            overflow-y: scroll;
            /*-webkit-overflow-scrolling: touch;*/
            background-color: #FFF;
        }

        .searchlist .searchlist-con .searchlist-con-item {
            overflow: hidden;
            margin-bottom: 1.6rem;
        }

        .searchlist .searchlist-con .searchlist-con-item .item-tit {
            display: block;
            width: 100%;
            font-size: .8rem;
        }

        .searchlist .searchlist-con .searchlist-con-item .item-tit h2 {
            font-size: 0.746667rem;
            text-indent: 5px;
            float: left;
            color: #222;
            border-left: none;
        }

        .searchlist .searchlist-con .searchlist-con-item .item-tit a {
            font-family: "Microsoft YaHei";
            color: #999;
            float: right;
            font-size: 0.586667rem;
            padding-right: .9rem;
            position: relative;
        }

        .searchlist .searchlist-con .searchlist-con-item .item-tit span {
            background: url("${ctx}/wesite/images/ico-arrow-r.png") no-repeat center;
            background-size: 0.6rem;
            width: 0.6rem;
            height: 0.6rem;
            position: absolute;
            right: 0;
            top: 50%;
            margin-top: -0.3rem;
            z-index: 9999;
        }

        .searchlist .searchlist-con .searchlist-con-item ul {
            font-size: 0;
            width: 100%;
        }

        .searchlist .searchlist-con .searchlist-con-item ul li {
            display: inline-block;
            width: 33.33%;
            font-size: .8rem;
            text-align: center;
            line-height: 2rem;
            margin: 0;
            margin-top: .8rem;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

        .searchlist .searchlist-con .searchlist-con-item ul li a {
            display: block;
        }

        .searchlist .searchlist-con .searchlist-con-item ul li img {
            display: block;
            width: 4rem;
            height: 4rem;
            opacity: 0;
            transition: opacity 2s;
        }

        .searchlist .searchlist-con .searchlist-con-item ul li img[src] {
            opacity: 1;
        }

        .searchlist .searchlist-con .searchlist-con-item ul li p {
            color: #666;
            text-align: left;
            font-size: .693334rem;
            line-height:1;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            margin-top: .16rem;
        }

        .aui-searchbar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background-color: #f2f2f2;
        }

        .aui-searchbar-input{
            width: 100%;
        }

    </style>
</head>
<body>
<div class="searchbox">
    <div class="aui-searchbar" id="search" onclick="javascript:location.href='/we/product/search';">
        <div class="aui-searchbar-input">
            <input type="search" placeholder="商品名称，通用名，生产厂家" id="search-input" name="querylike" value="${querylike}">
            <div class="aui-searchbar-clear-btn">
            </div>
        </div>
    </div>
    <div class="searchlist">
        <div class="searchlist-nav transition" id="searchlist-nav">
            <ul>
                <c:forEach var="info" items="${list }" varStatus="statu">
                    <li><a ${statu.index==0?"class='cur'":""} classCode="${info.code }"
                                                              href="#${info.id}">${info.name }</a></li>
                </c:forEach>
            </ul>
        </div>

        <div class="searchlist-con">
            <c:forEach var="info" items="${list}" varStatus="statu">
                <div id="${info.id}" class="searchlist-con-item">
                    <div class="item-tit">
                        <h2>${info.name}</h2>
                            <%--<a href="${ctx }/we/product/WeList?classCode="${info.code}">更多&gt;&gt;</a>--%>
                        <a onclick="window.location.href='${ctx }/we/product/WeList?clscode=${info.code }'">更多<span
                                class="arrow-r"></span></a>
                    </div>
                    <div class="cl"></div>
                    <ul>
                        <c:forEach var="subinfo" items="${info.sublist }">
                            <li>
                                    <%--<a onclick="window.location.href='${ctx }/we/product/WeList?clscode=${subinfo.code }'">--%>
                                <a href="${ctx }/we/product/WeList?clscode=${subinfo.code }">
                                        <%--<img src="<%=getRandomFileserver()%>${subinfo.photo}" onerror="this.src='${ctx}/wesite/images/noimg.jpg'"/>--%>
                                    <c:if test="${empty subinfo.photo}">
                                        <img data-src="${ctx}/wesite/images/noimg.jpg" />
                                    </c:if>
                                    <c:if test="${not empty subinfo.photo}">
                                        <img data-src="<%=getRandomFileserver()%>${subinfo.photo}"
                                             onerror="this.src='${ctx}/wesite/images/noimg.jpg'"/>
                                    </c:if>
                                    <p>${subinfo.name}</p>
                                </a>
                            </li>
                        </c:forEach>
                    </ul>
                </div>
            </c:forEach>
        </div>

    </div>
</div>
<div class="cl"></div>

<%request.setAttribute("bottomMenuId", "search");%>
<%@ include file="/wesite/view/common/bottom.jsp" %>

</body>
<script type="text/javascript">

    apiready = function () {
        api.parseTapmode();
    }
    var searchBar = document.querySelector(".aui-searchbar");
    var searchBarInput = document.querySelector(".aui-searchbar input");
//    var searchBarBtn = document.querySelector(".aui-searchbar .aui-searchbar-btn");
    var searchBarClearBtn = document.querySelector(".aui-searchbar .aui-searchbar-clear-btn");
    if (searchBar) {
//        searchBarInput.onclick = function () {
//            searchBarBtn.style.marginRight = 0;
//        }
        searchBarInput.oninput = function () {
            if (this.value.length) {
                searchBarClearBtn.style.display = 'block';
//                searchBarBtn.classList.add("aui-text-info");
//                searchBarBtn.textContent = "搜索";
            } else {
                searchBarClearBtn.style.display = 'none';
//                searchBarBtn.classList.remove("aui-text-info");
//                searchBarBtn.textContent = "取消";
            }
        }
    }
    searchBarClearBtn.onclick = function () {
        this.style.display = 'none';
        searchBarInput.value = '';
//        searchBarBtn.classList.remove("aui-text-info");
//        searchBarBtn.textContent = "取消";
    }
//    searchBarBtn.onclick = function () {
//        var keywords = searchBarInput.value;
//        if (keywords.length) {
//            searchBarInput.blur();
//            $("#searchForm").submit();
//        } else {
//            //this.style.marginRight = "-"+this.offsetWidth+"px";
//            searchBarInput.value = '';
//            searchBarInput.blur();
//        }
//    }

    $(document).ready(function () {
        var win_hig = $(window).height(); //屏幕的高度
        var head_hig = $("#search").outerHeight(true); //头部的高度
        var bot_hig = $(".bottom-nav").outerHeight(true); //底部的高度
        var divLi_hig = $(".searchlist-con div:last-child").height(); //最后一个div的高度
        var padd_top = parseInt($(".searchlist-con").css("padding-top"));
        var padd_hig = win_hig - head_hig - bot_hig - divLi_hig - padd_top - 10; //padding值

        if(padd_hig > 0){
            $(".searchlist-con").css("padding-bottom", padd_hig);
        }


        $(".searchlist-con").scroll(function () {

            var top = $(document).scrollTop(); //定义变量，获取滚动条的高度

            var menu = $(".searchlist-nav"); //定义变量，抓取#searchlist-nav

            var li_hig = $(".searchlist-nav li").height(); //导航Li的高度

            var cur_top = $(".cur").offset().top; //cur离屏幕顶部的距离

            var items = $(".searchlist-con").find(".searchlist-con-item"); //定义变量，查找.searchlist-con-item

            var curId = ""; //定义变量，当前所在的楼层item #id

            items.each(function () {
                var m = $(this); //定义变量，获取当前类
                var itemsTop = m.offset().top; //定义变量，获取当前类的top偏移量
                if (top > itemsTop - head_hig - li_hig) {
                    curId = "#" + m.attr("id");
                } else {
                    return false;
                }
            });

            var scrollTop = $(".searchlist-nav").scrollTop();
            //给相应的楼层设置cur,取消其他楼层的cur
            var curLink = menu.find(".cur");
            if (curId && curLink.attr("href") != curId) {
                curLink.removeClass("cur");
                menu.find("[href=" + curId + "]").addClass("cur");

                if (cur_top > win_hig / 2) {
                    scrollTop = scrollTop + (cur_top - win_hig / 2);
                } else {
                    scrollTop = scrollTop - li_hig;
                }
                document.getElementById("searchlist-nav").scrollTop = scrollTop;
            }
            lazyLoading()
        });

        //点击切换
        $('.searchlist-nav li a').on('click', function () {
            $(".searchlist-nav li a").removeClass('cur');
            $(this).addClass('cur');
        })
        lazyLoading();
    });

    //懒加载
    function lazyLoading() {
        var imgs = document.querySelectorAll("img"); //设置滚动事件
        var sh = window.innerHeight;
        lazyloadFn(); //图片懒加载的方法
        function lazyloadFn() { //获取滚动的距离
            var st = $(".searchlist-con").scrollTop(); //计算滚动中的底部的值
            var sn = sh + st; //循环所有的图片
            for (var i = 0; i < imgs.length; i++) {
                if (imgs[i].offsetTop <= sn) {
                    imgs[i].src = imgs[i].getAttribute("data-src");
                }
            }
        }
    }


</script>
</html>